﻿import QtQuick 2.0

Rectangle {

    id: root

    property bool checked: false
    property bool hovered: false
    property string title: "Word"
    property string icon_source: "qrc:/picture/exportItem_word.png"
    property string icon_selected: icon_source.split(".")[0] + "_select.png"
    property color color_selected: "#1677FF"

    signal clicked()

    width: 140*dp; height: 85*dp
    border.color: (hovered||checked) ? color_selected : "#CCCCCC"
    radius: 5

    Image {
        height: 30*dp; width: 30*dp
        x: 16*dp; y: 15*dp
        source: (root.checked || hovered) ? root.icon_selected : root.icon_source
    }
    Text{
        width: 50*dp
        x: 20*dp;  y: 50*dp
        text: root.title
        font.pixelSize: config.fontsize
    }

    Rectangle{
        height: 16*dp; width: 16*dp
        x: root.width-width-10*dp;  y: 10*dp
        radius: Math.min(height/2, width/2)
        border.color: checked ? color_selected : "#DDDDDD"
        color: checked ? color_selected : "#FFFFFF"
        Rectangle{
            height: parent.height*0.4; width: parent.width*0.4
            anchors.centerIn: parent
            radius: Math.min(height/2, width/2)
        }
    }

    MouseArea{
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true
        onEntered: {
            root.hovered = true
        }onExited: {
            root.hovered = false
        }onClicked: {
            root.clicked()
        }
    }

}
